<template>
  <!-- spc管理-统计分析 -->
  <basic-container>
    <el-tabs type="border-card" class="tabs-find">
      <el-tab-pane label="条件查询">
        <avue-form ref="properties" v-model="properties" :option="propertiesOption" @reset-change="emptytChange" @submit="findData">
          <!-- 产线搜索框 -->
          <template slot-scope="{}" slot="lineCodes">
            <input-search-multiple :searchValueList.sync="properties.lineCodes" :tableOption="tableOption" @getSelectedRows="getSelectedLineRow"></input-search-multiple>
          </template>
          <template slot="itemNames">
            <input-search-multiple :searchValueList.sync="properties.itemNames" :tableOption="tableOption" @getSelectedRows="getSelectedItemRow"></input-search-multiple>
          </template>
        </avue-form>
      </el-tab-pane>
      <el-button class="btn-setting" type="primary" size="small" @click="openDialog">设置</el-button>
    </el-tabs>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="CPK图表" name="cpk">
        <cpk-chart ref="cpkChart" v-if="activeName === 'cpk'" />
      </el-tab-pane>
      <el-tab-pane label="PPK趋势图" name="ppk">
        <ppk-chart ref="ppkChart" v-if="activeName === 'ppk'"></ppk-chart>
      </el-tab-pane>
      <el-tab-pane label="yield趋势图" name="yield">
        <yield-chart ref="yieldChart" v-if="activeName === 'yield'"></yield-chart>
      </el-tab-pane>
      <el-tab-pane label="原始数据分布图" name="rowData">
        <row-data-chart ref="rowDataChart" v-if="activeName === 'rowData'"></row-data-chart>
      </el-tab-pane>
      <el-tab-pane label="Xbar-R图表" name="xbar-R">
        <xbar-r-chart ref="xbarRChart" v-if="activeName === 'xbar-R'"></xbar-r-chart>
      </el-tab-pane>
      <el-tab-pane label="相关性分析" name="correlation">
        <correlation-chart ref="correlationChart" v-if="activeName === 'correlation'"></correlation-chart>
      </el-tab-pane>
    </el-tabs>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedProdRow" :key="timer" @newKey="newKey"></common-modal-template>
    <el-dialog title="设置采样周期" :visible.sync="dialogVisible" :modal-append-to-body="false">
      <avue-form ref="settingInfo" v-model="settingInfo" :option="samplingPeriodOption" @submit="submit"> </avue-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="dialogVisible = false">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import cpkChart from '@/views/spc-manage/components/cpkChart.vue';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import ppkChart from '@/views/spc-manage/components/ppkChart.vue';
import yieldChart from '@/views/spc-manage/components/yieldChart.vue';
import rowDataChart from '@/views/spc-manage/components/rowDataChart.vue';
import xbarRChart from '@/views/spc-manage/components/xbarRChart.vue';
import correlationChart from '@/views/spc-manage/components/correlationChart.vue';
// 多选搜索框
import inputSearchMultiple from '@/components/input-search-multiple';

export default {
  name: 'statisticalAnalysis',
  components: {
    cpkChart,
    ppkChart,
    yieldChart,
    rowDataChart,
    xbarRChart,
    inputSearchMultiple,
    correlationChart,
    CommonModalTemplate
  },
  data() {
    let timeDicData = [
      { name: '年', type: 'YEAR' },
      { name: '月', type: 'MONTH' },
      { name: '周', type: 'WEEK' },
      { name: '日', type: 'DATE' },
      { name: '时', type: 'HOUR' },
      { name: '分', type: 'MINUTE' }
    ];
    return {
      findInput: '',
      text: '',
      activeName: 'cpk',
      properties: {
        vendorName: [],
        productName: [],
        lineCodes: [],
        itemNames: []
      },
      timer: new Date().getTime(),
      tableOption: {
        modalTitle: '选择供应商信息（双击进行选择）',
        url: '/api/mes-admin/partner/page',
        isPage: true,
        selection: true,
        rowSelectionType: 'single',
        titleInfo: 'vendorInfo',
        columnDefs: [
          {
            label: '类型',
            prop: 'partnerType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=partner_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: '请输入类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '编码',
            prop: 'code',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '名称',
            prop: 'name',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '缩写',
            prop: 'abbreviation',
            rules: [
              {
                required: true,
                message: '请输入缩写',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '联系人',
            prop: 'principal',
            rules: [
              {
                required: true,
                message: '请输入联系人',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '联系方式',
            prop: 'contacts',
            rules: [
              {
                required: true,
                message: '请输入联系方式',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '位置',
            prop: 'locations',
            type: 'search'
          },
          {
            label: '条码规则',
            prop: 'sequenceName',
            type: 'search'
          }
        ]
      },
      propertiesOption: {
        labelWidth: '130',
        submitText: '查询',
        menuSpan: 18,
        column: [
          {
            label: '数据类型',
            prop: 'isOutline',
            display: true,
            type: 'select',
            dicData: [
              { name: '年', type: 'YEAR' },
              { name: '月', type: 'MONTH' },
              { name: '周', type: 'WEEK' },
              { name: '日', type: 'DATE' },
              { name: '时', type: 'HOUR' },
              { name: '分', type: 'MINUTE' }
            ],
            props: {
              label: 'name',
              value: 'type'
            },
            rules: [
              {
                required: true,
                message: '请输入数据类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '工厂',
            prop: 'factoryArea',
            display: true
          },
          {
            label: '产品',
            prop: 'partNo',
            type: 'search',
            display: true,
            disabled: true,

            rules: [
              {
                required: true,
                message: '请选择产品',
                trigger: 'blur'
              }
            ],
            appendClick: () => {
              this.openVendorModal();
            }
          },
          {
            label: '产线',
            prop: 'lineCodes',
            type: 'search',
            display: true,
            disabled: true
          },
          {
            label: '项目',
            prop: 'itemNames',
            type: 'search',
            display: true,
            disabled: true
          },
          {
            label: '生产日期',
            prop: 'workOrderDate ',
            type: 'datetimerange',

            // span: 8,
            // format: 'yyyy-MM-dd HH:mm:ss',
            // valueFormat: 'yyyy-MM-dd HH:mm:ss',
            // type: "datetime",
            // search: true,
            // searchOrder: 7,
            // searchType: 'datetimerange',
            // format: 'yyyy-MM-dd HH:mm:ss',
            // valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            rules: [
              {
                required: true,
                message: '请选择物料',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      dialogVisible: false,
      // 设置采样周期
      settingInfo: {},
      samplingPeriodOption: {
        labelWidth: '150',
        submitText: '查询',
        emptyBtn: false,
        submitBtn: false,
        menuSpan: 18,
        column: [
          {
            label: 'CPK统计周期类型',
            prop: 'cpkTrendCycleTimeType',
            type: 'select',
            dicData: timeDicData,
            props: {
              label: 'name',
              value: 'type'
            }
          },
          {
            label: 'CPK统计周期',
            prop: 'cpkTrendCycle'
          },
          {
            label: 'CPK子组大小',
            prop: 'cpkSubgroupSize'
          },
          {
            label: 'CPK估算标准差方法',
            prop: 'cpkStandardDeviationMethod',
            type: 'radio',
            dicData: [
              {
                label: '标准差',
                value: 0
              },
              {
                label: '极差值',
                value: 1
              },
              {
                label: '合并标准差',
                value: 2
              }
            ]
          },
          {
            label: 'CPK统计周期取样数',
            prop: 'cpkTrendSampleQuantity',
            row: true
          },
          // {},
          {
            label: '良率趋势图周期类型',
            prop: 'yieldCycleTimeType',
            type: 'select',
            dicData: timeDicData,
            props: {
              label: 'name',
              value: 'type'
            }
          },
          {
            label: '良率趋势图周期',
            prop: 'yieldCycle'
          },
          {
            label: '良率趋势周期取样数',
            prop: 'yieldSampleQuantity',
            row: true
          },
          {
            label: '散布图周期类型',
            prop: 'scatterCycleTimeType',
            type: 'select',
            dicData: timeDicData,
            props: {
              label: 'name',
              value: 'type'
            }
          },
          {
            label: '散布图周期',
            prop: 'scatterCycle'
          },
          {
            label: '散布图周期取样数',
            prop: 'scatterSampleQuantity',
            row: true
          },
          {
            label: 'Xbar-R图周期类型',
            prop: 'xbarRCycleTimeType',
            type: 'select',
            dicData: timeDicData,
            props: {
              label: 'name',
              value: 'type'
            }
          },
          {
            label: 'Xbar-R图周期',
            prop: 'xbarRCycle'
          },
          {
            label: 'Xbar-R图周期取样数',
            prop: 'xbarRSampleQuantity'
          }
        ]
      }
    };
  },
  watch: {
    'properties.productName'(val) {
      console.log('watch监听', val);
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log('测试input', this.$refs.inputs);
    });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      this.$nextTick(() => {
        switch (this.activeName) {
          case 'cpk':
            this.$refs.cpkChart.getData();
            break;
          case 'yield':
            this.$refs.yieldChart.getData();
            break;
          case 'rowData':
            this.$refs.rowDataChart.getData();
            break;
          case 'ppk':
            this.$refs.ppkChart.getData();
            break;
          case 'xbar-R':
            this.$refs.xbarRChart.getData();
            break;
          case 'correlation':
            this.$refs.correlationChart.getData();
            break;
          default:
            break;
        }
      });
    },
    openDialog() {
      this.dialogVisible = true;
      console.log(this.dialogVisible);
    },
    emptytChange() {},
    submit() {},
    findData() {
      console.log('测试数据', this.properties);
      this.$message.success('当前数据' + JSON.stringify(this.properties));
      this.$refs.properties.validate((valid, done) => {
        if (valid) {
          this.handleClick();
          done();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getSelectedLineRow(rowData, title) {
      // if (title === 'partInfo') {
      //     this.properties['partName'] = rowData.name;
      //     this.properties['partNo'] = rowData.partNo;
      //     this.properties['partModel'] = rowData.partModel;
      //     this.properties['partId'] = rowData.id;
      // } else {
      //     console.log('测试一下', rowData)
      //     this.properties['productName'].push({ label: rowData.name, value: rowData.id });
      //     this.properties['vendorCode'] = rowData.partnerNo;
      //     console.log(this.properties['productName'])
      // }
      console.log('测试一下', rowData);
      this.properties['lineCodes'].push({ label: rowData.name, value: rowData.id });
      console.log(this.properties['lineCodes']);
    },
    getSelectedItemRow(rowData) {
      this.properties['itemNames'].push({ label: rowData.partnerNo, value: rowData.id });
    },
    getSelectedProdRow(rowData) {
      this.properties['partNo'] = rowData.name;
    },
    newKey() {
      this.timer = new Date().getTime();
    },
    /**
     * 供应商模态框
     */
    openVendorModal() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择供应商信息（双击进行选择）',
        url: '/api/mes-admin/partner/page',
        isPage: true,
        selection: true,
        rowSelectionType: 'single',
        titleInfo: 'vendorInfo',
        columnDefs: [
          {
            label: '类型',
            prop: 'partnerType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=partner_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: '请输入类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '编码',
            prop: 'code',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '名称',
            prop: 'name',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '缩写',
            prop: 'abbreviation',
            rules: [
              {
                required: true,
                message: '请输入缩写',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '联系人',
            prop: 'principal',
            rules: [
              {
                required: true,
                message: '请输入联系人',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '联系方式',
            prop: 'contacts',
            rules: [
              {
                required: true,
                message: '请输入联系方式',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '位置',
            prop: 'locations',
            type: 'search'
          },
          {
            label: '条码规则',
            prop: 'sequenceName',
            type: 'search'
          }
        ]
      };
    },
    // 获取搜索条件
    getQueryParameter() {
      var itemName = '';
      var lineCode = '';
      for (let i = 0; i < this._get(this.properties, 'itemNames.length', 0); i++) {
        if (itemName === '') {
          itemName = itemName + this.properties.itemNames[i];
        } else {
          itemName = itemName + ',' + this.properties.itemNames[i];
        }
      }
      for (let j = 0; j < this.properties.lineCodes.length; j++) {
        if (lineCode === '') {
          lineCode = lineCode + this.properties.lineCodes[j];
        } else {
          lineCode = lineCode + ',' + this.properties.lineCodes[j];
        }
      }
      const spcQueryParam = {
        isOutline: Boolean(this.properties.isOutline),
        partNo: this.properties.partNo,
        itemName: itemName,
        lineCode: lineCode,
        factoryArea: this.properties.factoryArea,
        acupoint: this.properties.acupoint || '',
        getCpkAnalysis: true,
        getCpkTrend: true,
        getNormalTest: false,
        getYield: true,
        cpkTrendSampleQuantity: this.settingInfo.cpkTrendSampleQuantity,
        yieldSampleQuantity: this.settingInfo.yieldSampleQuantity,
        scatterSampleQuantity: this.settingInfo.scatterSampleQuantity,
        xbarRSampleQuantity: this.settingInfo.xbarRSampleQuantity,
        cpkTrendCycleTimeType: this.settingInfo.cpkTrendCycleTimeType,
        cpkTrendCycle: this.settingInfo.cpkTrendCycle,
        yieldCycleTimeType: this.settingInfo.yieldCycleTimeType,
        yieldCycle: this.settingInfo.yieldCycle,
        scatterCycleTimeType: this.settingInfo.scatterCycleTimeType,
        scatterCycle: this.settingInfo.scatterCycle,
        xbarRCycleTimeType: this.settingInfo.xbarRCycleTimeType,
        xbarRCycle: this.settingInfo.xbarRCycle,
        cpkSubgroupSize: this.settingInfo.cpkSubgroupSize,
        cpkStandardDeviationMethod: this.settingInfo.cpkStandardDeviationMethod,
        startDate: this.properties.workOrderDate.split('到 ')[0],
        endDate: this.properties.workOrderDate.split(' 到')[1]
      };
      return spcQueryParam;
    }
  }
};
</script>

<style lang="scss" scoped>
.tabs-find {
  margin-bottom: 25px;
  position: relative;
  ::v-deep .el-tabs__content {
    position: static;
  }
  .btn-setting {
    position: absolute;
    right: 10px;
    top: 3px;
    z-index: 10;
  }
}
::v-deep .el-input__prefix {
  .tag-list {
    overflow: hidden;
    height: 28px;
  }
}
</style>
